<template>
    <up-tabbar :value="name" :fixed="true" :placeholder="false" activeColor="#FE6E04" inactiveColor="#9B9B9B"
        :safeAreaInsetBottom="true" :border="false">
        <!-- 客户tabbar -->
        <up-tabbar-item name="首页" text="首页" @click="toHome">
            <template #active-icon>
                <image class="u-page__item__slot-icon" src="@/static/images/tabbar/icon_home_s.png">
                </image>
            </template>
            <template #inactive-icon>
                <image class="u-page__item__slot-icon" src="@/static/images/tabbar/icon_home.png"></image>
            </template>
        </up-tabbar-item>
        <up-tabbar-item name="发单" text="发单" @click="toCustomerOrder" v-if="role == 'customer'">
            <template #active-icon>
                <image class="u-page__item__slot-icon" src="@/static/images/tabbar/icon_sendorder_s.png">
                </image>
            </template>
            <template #inactive-icon>
                <image class="u-page__item__slot-icon" src="@/static/images/tabbar/icon_sendorder.png"></image>
            </template>
        </up-tabbar-item>
        <up-tabbar-item name="抢单" text="抢单" @click="toWorkerOrder" v-if="role == 'worker'">
            <template #active-icon>
                <image class="u-page__item__slot-icon" src="@/static/images/tabbar/icon_getorder_s.png">
                </image>
            </template>
            <template #inactive-icon>
                <image class="u-page__item__slot-icon" src="@/static/images/tabbar/icon_getorder.png"></image>
            </template>
        </up-tabbar-item>
        <up-tabbar-item name="我的" text="我的" @click="toMine">
            <template #active-icon>
                <image class="u-page__item__slot-icon" src="@/static/images/tabbar/icon_mine_s.png">
                </image>
            </template>
            <template #inactive-icon>
                <image class="u-page__item__slot-icon" src="@/static/images/tabbar/icon_mine.png"></image>
            </template>
        </up-tabbar-item>
    </up-tabbar>
</template>

<script setup lang="ts">

const role = uni.getStorageSync("role") || "customer"

const props = defineProps<{
    name: string
}>()

// 跳转到首页
const toHome = () => {
    if (props.name == '首页') return
    uni.switchTab({
        url: '/pages/tabbar/home/home'
    })
}

// 跳转到发单页
const toCustomerOrder = () => {
    if (props.name == '发单') return
    // 保存一个刷新标记 每次切换tab就刷新数据
    uni.setStorageSync('loadData', true)
    uni.switchTab({
        url: '/pages/tabbar/customerOrder/customerOrder'
    })
}
// 跳转到抢单页
const toWorkerOrder = () => {
    if (props.name == '抢单') return
    // 保存一个刷新标记 每次切换tab就刷新数据
    uni.setStorageSync('loadData', true)
    uni.switchTab({
        url: '/pages/tabbar/workerOrder/workerOrder'
    })
}

// 跳转到我的页面
const toMine = () => {
    if (props.name == '我的') return
    uni.switchTab({
        url: '/pages/tabbar/mine/mine'
    })
}

</script>

<style lang="scss" scoped>
.u-page__item__slot-icon {
    width: 40rpx;
    height: 40rpx;
}
</style>